<template>
  <div class="outside-the-box">
    <div class="contain-box manage-box">
      <header>
        加入的平台
      </header>
      <div class="main-box">
        <div class="operation">
          <form class="operation-search-form" @submit.prevent="searchGroup">
            <el-input placeholder="请输入平台名称" v-model="search_name">
              <el-button slot="append" icon="el-icon-search" @click="searchGroup"></el-button>
            </el-input>
          </form>
          <div class="operation-row">
            <div class="operation-block" @click="inviteGroup" v-if="total > 0">
              收到的邀请 {{total}}条
            </div>
            <div class="operation-block" @click="addGroup">
              <i class="text-blue el-icon-circle-plus promary"></i>
              <span>加入平台</span>
            </div>
          </div>
        </div>
        <join-group-table class="table" :data="join_group_list"></join-group-table>
      </div>
      <invite-join-group-list :data="invite_join_group_list" :is_invite_join_group_list_show.sync="is_invite_join_group_list_show"></invite-join-group-list>
      <add-group :is_add_group_form_show.sync="is_add_group_form_show"></add-group>
    </div>
  </div>

</template>

<script>
import group from "@/api/group.js";
import { mapGetters } from "vuex";

import JoinGroupTable from "./table.vue";
import InviteJoinGroupList from "./invite_list.vue";
import AddGroup from "./add_group.vue";

export default {
  name: "group-join",
  components: {
    JoinGroupTable,
    InviteJoinGroupList,
    AddGroup
  },
  computed: {
    ...mapGetters("group", ["join_group_list", "invite_join_group_list"])
  },
  data() {
    return {
      search_name: undefined,
      total: undefined,
      is_invite_join_group_list_show: false,
      is_add_group_form_show: false
    };
  },
  async mounted() {
    await this.$store.dispatch("group/getJoinGroupList");
    await this.$store.dispatch("group/getInviteJoinGroupList");
    if (this.invite_join_group_list === undefined) {
      this.total = 0;
    } else {
      this.total = this.invite_join_group_list.length;
    }
  },
  methods: {
    searchGroup() {
      this.$store.dispatch("group/getJoinGroupList", {
        groupName: this.search_name
      });
    },
    inviteGroup() {
      this.is_invite_join_group_list_show = true;
    },
    addGroup() {
      this.is_add_group_form_show = true;
    }
  },
  watch: {
    invite_join_group_list(newVal) {
      this.total = newVal.length;
    }
  }
};
</script>

<style>
</style>
